<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>


	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<meta name="keywords" content="javascript, jquery, plugins, scroll, navigation, slideshow, news, ticker, sections, sequential, prev, next, series, scrollTo, smooth, to, animation, overflow, element, window, effect, ariel, flesler">
	<meta name="description" content="Demo of jQuery.SerialScroll. A jQuery plugin to quickly animate series of items, made by Ariel Flesler.">
	<meta name="robots" content="all">
	<meta name="author" content="Ariel Flesler, aflesler(at)gmail(dot)com">
	<meta name="copyright" content="(c) 2007-2008 Ariel Flesler">
	<title>jQuery.SerialScroll</title>
	<link rel="shortcut icon" href="http://jquery.com/favicon.ico" type="image/x-icon">
	<link href="demo_files/base.css" type="text/css" rel="stylesheet">
	<link href="demo_files/style.css" type="text/css" rel="stylesheet">
	<script type="text/javascript" src="demo_files/jquery_002.js"></script>
	<script type="text/javascript" src="demo_files/jquery.js"></script>
	<script type="text/javascript" src="demo_files/jquery_003.js"></script>
	<script type="text/javascript" src="demo_files/init.js"></script>
	
	<!-- Timestamp: 1236821069 -->
</head><body>
	<h1>jQuery.SerialScroll&nbsp;<strong>by Ariel Flesler</strong></h1>
	<div class="sidebar">
			<div id="links">
			<h3>Links</h3>
			<ul>
			<li><a target="_blank" href="http://plugins.jquery.com/project/SerialScroll">Project Page</a></li>
<li><a target="_blank" href="http://flesler.blogspot.com/2008/02/jqueryserialscroll.html">Blog article</a></li>
<li><a href="http://demos.flesler.com/jquery/scrollTo/">ScrollTo's Demo</a></li>
			</ul>
		</div>
		</div>
		<div id="screen">
		<img class="prev" src="demo_files/prev.gif" alt="prev" height="53" width="42">
		<div id="navigation">
			<ul>
				<li><a href="#">Section 1</a></li>
				<li><a href="#">Section 3</a></li>
				<li><a href="#">Section 5</a></li>
			</ul>
		</div>
		<div id="sections">
			<ul>
				<li>
					<h2>Section 1</h2>
					<p>Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse et
turpis sed metus fermentum pellentesque. Vestibulum auctor neque ac
nunc elementum malesuada. Praesent non est sed libero vestibulum
consectetuer. Sed vehicula. Vivamus quis tellus sit amet erat ultrices
luctus. Fusce a ligula. Fusce viverra libero vitae velit. Aenean
bibendum nibh non lorem. Suspendisse quis velit. Integer sit amet
lacus. Curabitur tristique. Morbi eu lectus. Vestibulum tristique
aliquam quam. Sed neque.</p>
					<p>Nulla facilisi. Quisque eleifend
libero. Sed eros. Morbi vel leo. Morbi varius tincidunt sem. Nam
sodales volutpat velit. Suspendisse potenti. Duis vehicula pede non
nisi. Proin elit pede, ultrices non, ultrices quis, vulputate sit amet,
magna. Praesent sodales pellentesque justo. Donec blandit, augue id
convallis congue, magna libero hendrerit erat, id blandit est lorem a
tellus. Vestibulum tincidunt lectus quis metus. Pellentesque placerat
lacus in urna.</p>
				</li>
				<li>
					<h2>Section 2</h2>
					<p>Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse et
turpis sed metus fermentum pellentesque. Vestibulum auctor neque ac
nunc elementum malesuada. Praesent non est sed libero vestibulum
consectetuer. Sed vehicula. Vivamus quis tellus sit amet erat ultrices
luctus. Fusce a ligula. Fusce viverra libero vitae velit. Aenean
bibendum nibh non lorem. Suspendisse quis velit. Integer sit amet
lacus. Curabitur tristique. Morbi eu lectus. Vestibulum tristique
aliquam quam. Sed neque.</p>
					<p>Nulla facilisi. Quisque eleifend
libero. Sed eros. Morbi vel leo. Morbi varius tincidunt sem. Nam
sodales volutpat velit. Suspendisse potenti. Duis vehicula pede non
nisi. Proin elit pede, ultrices non, ultrices quis, vulputate sit amet,
magna. Praesent sodales pellentesque justo. Donec blandit, augue id
convallis congue, magna libero hendrerit erat, id blandit est lorem a
tellus. Vestibulum tincidunt lectus quis metus. Pellentesque placerat
lacus in urna.</p>
				</li>
				<li class="fallen">
					<h2>Section 3</h2>
					<p>Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse et
turpis sed metus fermentum pellentesque. Vestibulum auctor neque ac
nunc elementum malesuada. Praesent non est sed libero vestibulum
consectetuer. Sed vehicula. Vivamus quis tellus sit amet erat ultrices
luctus. Fusce a ligula. Fusce viverra libero vitae velit. Aenean
bibendum nibh non lorem. Suspendisse quis velit. Integer sit amet
lacus. Curabitur tristique. Morbi eu lectus. Vestibulum tristique
aliquam quam. Sed neque.</p>
					<p>Nulla facilisi. Quisque eleifend
libero. Sed eros. Morbi vel leo. Morbi varius tincidunt sem. Nam
sodales volutpat velit. Suspendisse potenti. Duis vehicula pede non
nisi. Proin elit pede, ultrices non, ultrices quis, vulputate sit amet,
magna. Praesent sodales pellentesque justo. Donec blandit, augue id
convallis congue, magna libero hendrerit erat, id blandit est lorem a
tellus. Vestibulum tincidunt lectus quis metus. Pellentesque placerat
lacus in urna.</p>
				</li>				
				<li>
					<h2>Section 4</h2>
					<p>Nullam
et sem eget massa pellentesque dapibus. Nulla sollicitudin enim quis
odio. Quisque ipsum lorem, volutpat eget, condimentum ac, posuere id,
risus. Suspendisse tortor metus, aliquet in, varius nec, hendrerit a,
libero. Suspendisse iaculis. Fusce commodo urna ut enim. Fusce tempus
eros. Phasellus sodales tellus id dolor. Integer sollicitudin, turpis
ac interdum condimentum, enim enim tempus metus, sed imperdiet massa
diam nec elit. Mauris ante augue, hendrerit non, commodo ac, porttitor
eu, turpis.</p>
					<p>In fermentum nibh ut diam. Mauris sagittis,
tellus ac molestie fermentum, arcu orci pharetra mi, id vehicula massa
leo vel pede. Nullam semper tincidunt lorem. Proin arcu libero, auctor
sed, interdum egestas, ullamcorper et, lacus. Donec id lectus eget diam
accumsan ullamcorper. Donec at urna et lacus condimentum pellentesque.
Phasellus dapibus hendrerit massa. Sed sed ipsum. Quisque venenatis.
Donec vel turpis.</p>
				</li>
				<li>
					<h2>Section 5</h2>
					<p>Nullam
et sem eget massa pellentesque dapibus. Nulla sollicitudin enim quis
odio. Quisque ipsum lorem, volutpat eget, condimentum ac, posuere id,
risus. Suspendisse tortor metus, aliquet in, varius nec, hendrerit a,
libero. Suspendisse iaculis. Fusce commodo urna ut enim. Fusce tempus
eros. Phasellus sodales tellus id dolor. Integer sollicitudin, turpis
ac interdum condimentum, enim enim tempus metus, sed imperdiet massa
diam nec elit. Mauris ante augue, hendrerit non, commodo ac, porttitor
eu, turpis.</p>
					<p>In fermentum nibh ut diam. Mauris sagittis,
tellus ac molestie fermentum, arcu orci pharetra mi, id vehicula massa
leo vel pede. Nullam semper tincidunt lorem. Proin arcu libero, auctor
sed, interdum egestas, ullamcorper et, lacus. Donec id lectus eget diam
accumsan ullamcorper. Donec at urna et lacus condimentum pellentesque.
Phasellus dapibus hendrerit massa.</p>
				</li>
			</ul>
		</div>
		<img class="next" src="demo_files/next.gif" alt="next" height="53" width="42">
	</div>
	
	<p class="separator message">
		This plugin can be used for navigation purposes. You decide how many to show at a time with CSS.<br>
		The items don't need to be aligned, you can spread them as much as you want, it will always find them :)<br>
		Check jQuery.ScrollTo's demo if you want to create the perfect animation. You can use its settings too!
	</p>
	
	<div id="screen2">
		<div id="buttons">
			<a class="prev" href="#">Previous</a>
			<a class="next" href="#">Next</a>
			<br class="clear">
		</div>
		<div id="slideshow">
			<ul>
				<li><img src="demo_files/watermark_002.jpg" height="300" width="225"></li>
				<li><img src="demo_files/watermark_009.jpg" height="300" width="225"></li>
				<li><img src="demo_files/watermark_011.jpg" height="300" width="225"></li>
				<li><img src="demo_files/watermark_004.jpg" height="300" width="225"></li>
				<li><img src="demo_files/watermark_003.jpg" height="300" width="225"></li>
				<li><img src="demo_files/watermark_014.jpg" height="300" width="225"></li>
				<li><img src="demo_files/watermark_012.jpg" height="300" width="225"></li>
				<li><img src="demo_files/watermark_008.jpg" height="300" width="225"></li>
				<li><img src="demo_files/watermark_007.jpg" height="300" width="225"></li>
				<li><img src="demo_files/watermark_013.jpg" height="300" width="225"></li>
				<li><img src="demo_files/watermark_010.jpg" height="300" width="225"></li>
				<li><img src="demo_files/watermark.jpg" height="300" width="225"></li>
				<li><img src="demo_files/watermark_005.jpg" height="300" width="225"></li>
				<li><img src="demo_files/watermark_006.jpg" height="300" width="225"></li>
			</ul>
		</div>
	</div>
	
	<p class="separator message">
		You can also build slideshows with it. In this case, I centered the photos and made them clickable.<br>
		I set this one to cycle, try going over the last photo. I'm using a special easing equation.<br>
		You are allowed to interrupt the animation by clicking again. You can't do that in the first one.
	</p>
	
	<div id="ticker-container">
		<button id="add-news">Append 2 Items</button>
		<button id="shuffle-news">Shuffle</button>
		
		<div id="news-ticker">
			<div class="first">
				<h4>News 1</h4>
				<p>Nullam a leo. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas mollis vestibulum purus, rutrum sed.</p>
			</div>
			
			
			
			
			
			
			
		<div>
				<h4>News 3</h4>
				<p>Morbi condimentum. Sed id nunc eu arcu aliquet bibendum. Maecenas vestibulum eros fringilla tortor. Nunc purus.</p>
			</div><div>
				<h4>News 5</h4>
				<p>Pellentesque varius ligula et enim. Nulla ut purus vel magna ullamcorper vestibulum. Aliquam at enim at ligula bibendum.</p>
			</div><div>
				<h4>News 2</h4>
				<p>Phasellus nunc ipsum, faucibus non, iaculis ac, sagittis malesuada, augue. Aliquam sollicitudin. Cras iaculis lorem sit amet.</p>
			</div><div>
				<h4>News 4</h4>
				<p>Sed condimentum. Duis orci. Ut odio leo, dapibus pretium, rhoncus a, sodales eu, nibh. Vivamus consectetuer vestibulum.</p>
			</div><div>
				<h4>News 7</h4>
				<p>Etiam aliquet. Nulla consectetuer, nibh ut gravida consectetuer, nisl enim vestibulum nibh. Suspendisse potenti.</p>
			</div><div>
				<h4>News 6</h4>
				<p>Suspendisse id quam at lectus placerat dignissim. Praesent nulla urna, rutrum sed. Maecenas vitae libero ac elit.</p>
			</div><div>
				<h4>News 8</h4>
				<p>Aliquam porta, nisi id aliquam posuere, enim mi bibendum tellus, non venenatis nisi orci at mi. Curabitur placerat.</p>
			</div><div>
				<h4>News 9</h4>
				<p>Suspendisse id quam at lectus placerat dignissim. Praesent nulla urna, rutrum sed. Maecenas vitae libero ac elit.</p>
			</div><div>
				<h4>News 10</h4>
				<p>Aliquam porta, nisi id aliquam posuere, enim mi bibendum tellus, non venenatis nisi orci at mi. Curabitur placerat.</p>
			</div></div>
	</div>
	
	<p class="separator message">
		It can be used for news tickers as well. The plugin is not restricted to clicks or buttons.<br>
		Here the option 'lazy' is used and it works, click the buttons on the right if you don't trust me :)<br>
		You can also specify an interval for auto scrolling. To stop the animation, use $().stop() on the container.
	</p>
	
	<p id="general" class="side message">
		This demo shows 3 different uses of this plugin. It can certainly be used for others purposes as well.<br>
		Note that it can be used with any html. This is not a widget and the examples are just improvised.<br>
		Use "View source" to see the different calls and markup. All the settings are commented.		
	</p>
	
	<p id="extra" class="side message">
		This plugin won't modify your html at all, won't even touch a single style.<br>
		It gives you full control over the markup and the look, that's your part of the job :)<br>
		You can control the animation from outside with the 3 exposed events (prev, next, goto).<br>
		Guess what ? If you manage to show them scrollbars, users with no javascript can still navigate your content!
	</p>
	<script type="text/javascript" src="demo_files/ga.js"></script>
	<script type="text/javascript" src="demo_files/tracker.js"></script>

</body></html>